<script setup lang="ts">
import * as echarts from "echarts";

import { ref, onMounted, computed } from "vue";


const data = ref([
  {
    name: "水果店",
    data: [
      { year: 2024, month: 12, sales: 44, profit: 38, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[0, 0], [], [], [], [], []] },
      { year: 2025, month: 1, sales: 42, profit: 36, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[35, 0], [39, 29], [40, 31], [40, 34], [40, 34]], },
      { year: 2025, month: 2, sales: 36, profit: 32, new: 1, fan: 0, into1: 0, into2: 0, outto1: 4, outto2: 4, weeks: [[35, 0], [37, 27], [36, 30], [36, 32], [36, 32]] },
      { year: 2025, month: 3, sales: 38, profit: 33, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[33, 0], [36, 27], [37, 30], [38, 31], [38, 33]] },
      { year: 2025, month: 4, sales: 39, profit: 32, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[34, 23], [36, 31], [38, 32], [39, 32], [39, 32]] },
      { year: 2025, month: 5, sales: 39, profit: 33, new: 0, fan: 1, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[34, 0], [36, 24], [37, 30], [39, 31], [39, 33]] },
      { year: 2025, month: 6, sales: 40, profit: 34, new: 1, fan: 1, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [] },
      { year: 2025, month: 7, sales: 40, profit: 35, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [] },
      { year: 2025, month: 8, sales: 39, profit: 34, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [] },
      { year: 2025, month: 9, sales: 40, profit: 35, new: 0, fan: 0, into1: 1, into2: 1, outto1: 0, outto2: 0, weeks: [] },

    ],
  },
  {
    name: "咖啡店",
    data: [
      { year: 2024, month: 12, sales: 41, profit: 33, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[0, 0], [], [], [], [], []] },
      { year: 2025, month: 1, sales: 36, profit: 31, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[28, 0], [33, 24], [34, 30], [35, 30], [35, 31],] },
      { year: 2025, month: 2, sales: 26, profit: 21, new: 0, fan: 0, into1: 0, into2: 0, outto1: 12, outto2: 12, weeks: [[16, 0], [22, 13], [24, 20], [25, 21], [26, 21], []] },
      { year: 2025, month: 3, sales: 28, profit: 20, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[21, 0], [24, 18], [26, 20], [27, 20], [28, 20]] },
      { year: 2025, month: 4, sales: 31, profit: 21, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[25, 10], [28, 19], [30, 20], [31, 21], [31, 21]] },
      { year: 2025, month: 5, sales: 29, profit: 22, new: 2, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[25, 0], [26, 21], [27, 22], [28, 22], [29, 22]] },
      { year: 2025, month: 6, sales: 32, profit: 25, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, },
      { year: 2025, month: 7, sales: 29, profit: 23, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, },
      { year: 2025, month: 8, sales: 31, profit: 24, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, }
      { year: 2025, month: 9, sales: 28, profit: 23, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, }

    ],
  },
  {
    name: "花店",
    data: [
      { year: 2024, month: 12, sales: 39, profit: 35, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[0, 0], [], [], [], [], []], },
      { year: 2025, month: 1, sales: 40, profit: 33, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[35, 0], [38, 25], [40, 29], [40, 33], [40, 33]] },
      { year: 2025, month: 2, sales: 42, profit: 36, new: 0, fan: 0, into1: 2, into2: 2, outto1: 0, outto2: 0, weeks: [[31, 0], [37, 26], [39, 29], [42, 35], [42, 36], []] },
      { year: 2025, month: 3, sales: 42, profit: 36, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[36, 0], [40, 26], [41, 29], [42, 30], [42, 36]] },
      { year: 2025, month: 4, sales: 43, profit: 35, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [[39, 21], [43, 29], [43, 33], [43, 35], [43, 35]] },
      { year: 2025, month: 5, sales: 39, profit: 32, new: 0, fan: 0, into1: 0, into2: 0, outto1: 5, outto2: 4, weeks: [[30, 0], [34, 26], [37, 28], [38, 30], [39, 32]] },
      { year: 2025, month: 6, sales: 37, profit: 31, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [] },
      { year: 2025, month: 7, sales: 37, profit: 30, new: 2, fan: 0, into1: 0, into2: 0, outto1: 2, outto2: 2, weeks: [] },
      { year: 2025, month: 8, sales: 35, profit: 30, new: 0, fan: 0, into1: 0, into2: 0, outto1: 2, outto2: 1, weeks: [] },
      { year: 2025, month: 9, sales: 35, profit: 28, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, weeks: [] },

    ],
  },
]);

onMounted(() => {
  initTrend();
  initPercent();
});

const unit = "万";
const company1CurrentMonth = ref(12);
const company2CurrentMonth = ref(1);
const departmentCurrentMonth = ref(1);

const company1Sales = computed(() => {
  return data.value
    .map((item) => {
      return item.data.filter((mitem) => {
        return mitem.month === company1CurrentMonth.value;
      })[0];
    })
    .reduce((pre, item) => {
      return pre + item.sales;
    }, 0);
});

const company2Sales = computed(() => {
  return data.value
    .map((item) => {
      return item.data.filter((mitem) => {
        return mitem.month === company2CurrentMonth.value;
      })[0];
    })
    .reduce((pre, item) => {
      return pre + item.sales;
    }, 0);
});

const company1Profit = computed(() => {
  return data.value
    .map((item) => {
      return item.data.filter((mitem) => {
        return mitem.month === company1CurrentMonth.value;
      })[0];
    })
    .reduce((pre, item) => {
      return pre + item.profit;
    }, 0);
});

const company2Profit = computed(() => {
  return data.value
    .map((item) => {
      return item.data.filter((mitem) => {
        return mitem.month === company2CurrentMonth.value;
      })[0];
    })
    .reduce((pre, item) => {
      return pre + item.profit;
    }, 0);
});

const conpany1Rate = computed(() => {
  return ((company1Profit.value / company1Sales.value) * 100).toFixed(2);
});

const conpany2Rate = computed(() => {
  return ((company2Profit.value / company2Sales.value) * 100).toFixed(2);
});

const contrastSales = computed(() => {
  return company2Sales.value - company1Sales.value;
});

const contrastProfit = computed(() => {
  return company2Profit.value - company1Profit.value;
});

const contrastRate = computed(() => {
  return (Number(conpany2Rate.value) - Number(conpany1Rate.value)).toFixed(2);
});

const departmentMonthArr = computed(() => {
  return data.value.map((item) => {
    return item.data.filter((mitem) => {
      return mitem.month === departmentCurrentMonth.value;
    })[0];
  });
});

interface itemStyle {
  borderRadius: number[];
}

interface trendItem {
  name: string;
  type: string;
  stack: string;
  emphasis: object;
  data: number[];
  itemStyle: itemStyle;
  areaStyle?: object;
  barWidth?: Number;
  smooth?: true;
}

interface xAxis {
  type: string;
  data: string[];
}
interface trendData {
  xAxis: xAxis;
  series: trendItem[];
}

const trendData = computed(() => {
  const salesArr: trendItem[] = [];
  const profitArr: trendItem[] = [];
  const xAxis: xAxis = {
    type: "category",
    data: data.value[0].data.map((item) => {
      return item.month + "月";
    }),
  };

  for (let i = 0; i < data.value.length; i++) {
    const item = data.value[i];

    const salesItem: trendItem = {
      name: item.name.slice(2) + "销售",
      type: "bar",
      stack: "销售",
      barWidth: 30,
      areaStyle: {},
      smooth: true,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0], // 这里设置圆角的大小
      },
      data: item.data.map((item) => {
        return item.sales;
      }),
    };

    const profitItem: trendItem = {
      name: item.name.slice(2) + "利润",
      type: "bar",
      stack: "利润",
      barWidth: 30,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0], // 这里设置圆角的大小
      },
      data: item.data.map((item) => {
        return item.profit;
      }),
    };

    salesArr.push(salesItem);
    profitArr.push(profitItem);
  }

  return { xAxis: xAxis, series: [...salesArr, ...profitArr] };
});

interface percentItem {
  value: number;
  name: string;
}

const percentData = computed(() => {
  return data.value.map((item) => {
    const percentItem: percentItem = {
      value: item.data.reduce((pre, item) => {
        return pre + item.news;
      }, 0),
      name: item.name,
    };

    return percentItem;
  });
});

console.log("percentData", percentData.value);

function initTrend() {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // xAxis: [
    //   {
    //     type: "category",
    //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //   },
    // ],
    xAxis: trendData.value.xAxis,
    yAxis: [
      {
        type: "value",
      },
    ],
    series: trendData.value.series,
    // series: [

    //   {
    //     name: "Others",
    //     type: "bar",
    //     stack: "Search Engine",
    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: [62, 82, 91, 84, 109, 110, 120],
    //   },
    // ],
  };

  echarts.init(document.getElementById("trend")).setOption(option);
}

function initPercent() {
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "入职新员工",
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: percentData.value,
      },
    ],
  };
  echarts.init(document.getElementById("percent")).setOption(option);
}
</script>


<template>
  <el-row :gutter="20">
    <!-- 左 -->
    <el-col :span="16">
      <div class="L-box">
        <div class="flex-row">
          <div class="title-row">{{ company1CurrentMonth }}月公司数据</div>
          <el-select v-model="company1CurrentMonth" placeholder="请选择月份" size="default" style="width: 240px">
            <el-option v-for="item in 12" :key="item" :label="item + '月'" :value="item" />
          </el-select>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/1.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title" style="font-weight: bold;">{{ company1Sales }} <span
                    style="font-size: 12px;">{{ unit }}</span></div>
                <div class="panel-mini-text secondary-text-color ">销售额</div>
              </div>
            </div>

          </el-col>
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/2.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title" style="font-weight: bold;">{{ company1Profit }} <span
                    style="font-size: 12px;">{{ unit }}</span></div>
                <div class="panel-mini-text secondary-text-color">利润额</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/4.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title" style="font-weight: bold;">{{ conpany1Rate }} <span
                    style="font-size: 12px;">%</span></div>
                <div class="panel-mini-text secondary-text-color">利润率</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="L-box margin-top-20">
        <div class="flex-row">
          <div class="title-row">{{ company2CurrentMonth }}月公司数据</div>
          <el-select v-model="company2CurrentMonth" placeholder="请选择月份" size="default" style="width: 240px">
            <el-option v-for="item in 12" :key="item" :label="item + '月'" :value="item" />
          </el-select>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/1.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title">
                  <span style="font-weight: bold;">{{ company2Sales }} <span style="font-size: 12px;">{{ unit
                  }}</span></span>
                  <span style="margin-left:20px">
                    <i class="iconfont" :style="{ color: Number(contrastSales) >= 0 ? 'green' : 'red' }"
                      :class="Number(contrastSales) >= 0 ? 'icon-tubiaoshangshengqushi' : 'icon-tubiaoxiajiangqushi'"></i>
                    <span style="font-size: 20px;margin-left:10px;font-weight: bold;"
                      :style="{ color: Number(contrastSales) >= 0 ? 'green' : 'red' }">{{ contrastSales }}</span>
                  </span>
                </div>
                <div class="panel-mini-text secondary-text-color ">销售额</div>
              </div>
            </div>

          </el-col>
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/2.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title" style="font-weight: bold;">
                  <span style="font-weight: bold;">{{ company2Profit }} <span style="font-size: 12px;">{{ unit
                  }}</span></span>
                  <span style="margin-left:20px">
                    <i class="iconfont" v-if="Number(contrastProfit) != 0"
                      :style="{ color: Number(contrastProfit) >= 0 ? 'green' : 'red' }"
                      :class="Number(contrastProfit) >= 0 ? 'icon-tubiaoshangshengqushi' : 'icon-tubiaoxiajiangqushi'"></i>
                    <span style="font-size: 20px;margin-left:10px;font-weight: bold;"
                      :style="{ color: Number(contrastProfit) > 0 ? 'green' : 'red' }">{{ contrastProfit }}</span>
                  </span>
                </div>
                <div class="panel-mini-text secondary-text-color">利润额</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="data-box margin-top-20">
              <div>
                <img src="@/assets/images/4.png" style="width: 80px;">
              </div>
              <div class="padding-left-20">
                <div class="panel-title" style="font-weight: bold;">
                  <span style="font-weight: bold;">{{ conpany2Rate }} <span style="font-size: 12px;">%</span></span>
                  <span style="margin-left:20px">
                    <i class="iconfont" v-if="Number(contrastRate) != 0"
                      :style="{ color: Number(contrastRate) >= 0 ? 'green' : 'red' }"
                      :class="Number(contrastRate) >= 0 ? 'icon-tubiaoshangshengqushi' : 'icon-tubiaoxiajiangqushi'"></i>
                    <span style="font-size: 20px;margin-left:10px;font-weight: bold;"
                      :style="{ color: Number(contrastRate) > 0 ? 'green' : 'red' }">{{ contrastRate }}</span>
                  </span>
                </div>
                <div class="panel-mini-text secondary-text-color">利润率</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="L-box margin-top-20">
        <div class="flex-row">
          <div class="title-row">数据趋势</div>
          <el-select placeholder="请选择月份" size="default" style="width: 240px">
            <el-option v-for="item in 12" :key="item" :label="item + '月'" :value="item" />
          </el-select>

        </div>

        <div id="trend" class="margin-top-20" style="width:100%;height:500px"></div>

      </div>

    </el-col>

    <!-- 右 -->
    <el-col :span="8">
      <div class="L-box">
        <div class="flex-row">
          <div class="title-row">部门数据</div>
          <el-select v-model="departmentCurrentMonth" placeholder="请选择月份" size="default" style="width: 240px">
            <el-option v-for="item in 12" :key="item" :label="item + '月'" :value="item" />
          </el-select>
        </div>

        <!-- 一部 -->
        <div>
          <div class="margin-top-20">
            <el-icon>
              <Connection />
            </el-icon>
            <span class="panel-small-text padding-left-10">销售一部</span>
          </div>
          <div class="L-box margin-top-10 gradient-background1">
            <el-row class="text-align-center">
              <el-col :span="8">
                <img src="../assets/images/18.png" style="width: 50px;" alt="">
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[0].sales }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">销售数据</div>
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[0].profit }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">利润数据</div>
              </el-col>
            </el-row>
          </div>

        </div>
        <!-- 二部 -->
        <div>
          <div class="margin-top-20">
            <el-icon>
              <Connection />
            </el-icon>
            <span class="panel-small-text padding-left-10">销售二部</span>
          </div>
          <div class="L-box margin-top-10 gradient-background2">
            <el-row class="text-align-center">
              <el-col :span="8">
                <img src="../assets/images/17.png" style="width: 50px;" alt="">
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[1].sales }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">销售数据</div>
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[1].profit }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">利润数据</div>
              </el-col>
            </el-row>
          </div>

        </div>
        <!-- 三部 -->
        <div>
          <div class="margin-top-20">
            <el-icon>
              <Connection />
            </el-icon>
            <span class="panel-small-text padding-left-10">销售三部</span>
          </div>
          <div class="L-box margin-top-10 gradient-background3">
            <el-row class="text-align-center">
              <el-col :span="8">
                <img src="../assets/images/28.png" style="width: 50px;" alt="">
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[2].sales }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">销售数据</div>
              </el-col>
              <el-col :span="8">
                <div class="panel-text">{{ departmentMonthArr[2].profit }}</div>
                <div class="panel-mini-text secondary-text-color margin-top-5">利润数据</div>
              </el-col>
            </el-row>
          </div>

        </div>

      </div>

      <div class="L-box margin-top-20" style="height:440px">
        <div class="flex-row">
          <div class="title-row">数据占比</div>
          <el-select placeholder="请选择月份" size="default" style="width: 240px">
            <el-option v-for="item in 12" :key="item" :label="item + '月'" :value="item" />
          </el-select>
        </div>
        <div id="percent" style="width: 100%;height:350px;margin-top:30px"></div>
      </div>

    </el-col>

  </el-row>
</template>
<style>
.gradient-background1 {
  background: linear-gradient(to right, #fff4fa, #fff);
}

.gradient-background2 {
  background: linear-gradient(to right, #f1fcfa, #fff);
}

.gradient-background3 {
  background: linear-gradient(to right, #e8f4fb, #fff);
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-left: 4px solid #198ffc;
  padding-left: 10px;
  font-size: 16px;
}

.data-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-size: 26px;
}

.panel-large-text {
  font-size: 22px;
}

.panel-big-text {
  font-size: 20px;
}

.panel-text {
  font-size: 18px;
}

.panel-small-text {
  font-size: 14px;
}

.panel-mini-text {
  font-size: 12px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-top-10 {
  margin-top: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-top-40 {
  margin-top: 40px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-top-60 {
  margin-top: 60px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-left-20 {
  padding-left: 20px;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.main-text-color {
  color: #303133;
}

.secondary-text-color {
  color: #909399;
}

.flex-row {
  display: flex;
  align-items: center;
}

.L-box {
  width: 100%;
  /* height: 100px; */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.data-board {
  width: 100%;
  text-align: center;
  font-size: 30px;
  margin: 20px auto;
}
</style>
